```
<script setup>
import { onMounted, ref } from 'vue';
import { goodsTypeList } from '@/api/goods';
import { Search } from '@element-plus/icons-vue';
import defaultImg from '@/assets/default.png';
import carouselImg1 from '@/assets/图书馆.jpg';
import carouselImg2 from '@/assets/1111.png';
import carouselImg3 from '@/assets/慕士塔格峰.jpg';

// 轮播图数据
const carouselImages = ref([
  { id: 1, url: carouselImg1, alt: '' }, 
  { id: 2, url: carouselImg2, alt: '' }, 
  { id: 3, url: carouselImg3, alt: '' } 
]);
// 商品分类数据
const categoryList = ref([]);
// 加载状态
const loading = ref(true);

// 获取商品分类
const getCategoryList = () => {
  return goodsTypeList().then(res => {
    if (res.success) {
      categoryList.value = res.data;
    }
  });
};

// 页面加载时获取数据
onMounted(async () => {
  try {
    loading.value = true;
    await Promise.all([getCategoryList()]);
  } catch (error) {
    console.error('数据加载失败:', error);
  } finally {
    loading.value = false;
  }
});

</script>

<template>
  <div class="home-container">
    <!-- 顶部轮播图区域 -->
    <el-carousel height="400px" indicator-position="none" v-if="!loading">
      <el-carousel-item v-for="item in carouselImages" :key="item.id">
        <div class="carousel-item">
          <img 
            :src="item.url || defaultImg"
            :alt="item.alt"
            class="carousel-img"
          >
          <div class="carousel-info">
            <h2 class="carousel-title">{{ item.alt }}</h2>
            <p class="carousel-desc">优质二手教材，价格实惠</p>
          </div>
        </div>
      </el-carousel-item>
    </el-carousel>

    <!-- 分类导航 -->
    <div class="category-container" v-if="!loading && categoryList.length > 0">
      <h3 class="section-title">商品分类</h3>
      <el-row gutter="20" class="category-list">
        <el-col :span="4" v-for="category in categoryList" :key="category.id">
          <div class="category-card">
            <div class="category-icon">{{ category.name.charAt(0) }}</div>
            <div class="category-name">{{ category.name }}</div>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 加载中状态 -->
    <el-skeleton v-if="loading" class="loading-skeleton" :count="6" />
  </div>
</template>

<style scoped lang="scss">
.home-container {
  padding: 0 20px;
}

/* 轮播图样式 */
.el-carousel {
  margin: 20px 0;
}

.carousel-item {
  position: relative;
  height: 100%;
  overflow: hidden;
}

.carousel-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.carousel-item:hover .carousel-img {
  transform: scale(1.05);
}

.carousel-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 30px;
  background: linear-gradient(transparent, rgba(0,0,0,0.7));
  color: white;
}

.carousel-title {
  font-size: 28px;
  margin-bottom: 10px;
}

.carousel-desc {
  font-size: 16px;
  margin-bottom: 15px;
  opacity: 0.9;
}

.carousel-price {
  font-size: 24px;
  font-weight: bold;
  color: #ff4d4f;
}

/* 分类导航样式 */
.category-container {
  margin: 40px 0;
}

.section-title {
  font-size: 22px;
  margin-bottom: 20px;
  position: relative;
  display: inline-block;

  &::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 40px;
    height: 3px;
    background-color: #409eff;
  }
}

.category-list {
  margin-bottom: 20px;
}

.category-card {
  background-color: #f5f7fa;
  border-radius: 8px;
  padding: 20px 0;
  text-align: center;
  transition: all 0.3s ease;
  cursor: pointer;

  &:hover {
    background-color: #409eff;
    color: white;
    transform: translateY(-5px);
  }
}

.category-icon {
  width: 50px;
  height: 50px;
  line-height: 50px;
  border-radius: 50%;
  background-color: #e6f7ff;
  color: #409eff;
  font-size: 24px;
  margin: 0 auto 15px;
  transition: all 0.3s ease;

  .category-card:hover & {
    background-color: white;
  }
}

/* 加载状态 */
.loading-skeleton {
  margin: 20px;
}
</style>